<!DOCTYPE html>
<!--
data ：用于定义数据。
methods： 用于定义的函数，可以通过 return 来返回函数值。
插值表达式{{}} :就是绑定某个对象的属性的值实现了用标记双向绑定
不需要dom操作。
以前的dom操作： document.getElementsById("root").value=某某值

{{ }} 用于输出对象属性和函数返回值
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
  // 选项
})

通过vue实例el将数据绑定到了视图，也就是html当中，如果将vue实例直接绑定到下方的div中
-->

<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<!--1.差值表达法-->
		<!--data怎么绑定到视图里面呢？可以通过模版标记的形式：{{message}}-->
		<div id="root">{{msg}}{{xyz}}</div>
		<!--一个控件绑定一个vue对象-->
		<div id="root2">{{msg}}</div>
		<script>
		//实例化Vue对象el 参数，它是 DOM 元素中的 id
		new Vue({
		// 挂载点(用来绑定与元素的：el名字不能改的内置的)
		el: '#root',  
		// 数据对象(自定义数据对象:data名字是不能改,内置的。里面表示名-值对的数据)
		data:{
		   msg:'hello world8888' ,//实际上就是数据绑定的形式
		   xyz:'8888888888'
		}
		})
		
		new Vue({
		// 挂载点(用来绑定与元素的：el名字不能改的内置的)
		el: '#root2',  
		// 数据对象(自定义数据对象:data名字是不能改,内置的。里面表示名-值对的数据)
		data:{
		   msg:'99999999999' //实际上就是数据绑定的形式
		}
		})
		</script>
	</body>
</html>
